<template>
    <div id="register">
        <h3>注册账号</h3>
        <el-form :label-position="labelPosition" label-width="80px" :model="user">
            <el-form-item label="用户名">
                <el-input v-model="user.username"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input type="password" v-model="user.password"></el-input>
            </el-form-item>
            <el-form-item >
                <el-button type="primary" @click="submitForm">立即注册</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>

    export default {
        name: "RegisterView",
        data(){
            return{
                labelPosition:'left',
                user:{
                    username:'',
                    password:''
                }
            }
        },
        methods:{
            // 用户注册回调函数
            submitForm(){  // 发送异步请求 完成用户信息注册  ajax  axios  http://localhost:8989/kgc/user/register  post

               // 在当前项目中通过异步请求的方式 向给接口发起请求 会触发跨域  同源策略   请求协议 请求ip  port   css  js  img
                // http://localhost:8080       ->      http://localhost:8989
                this.$http.post('http://localhost:8989/kgc/user/register',this.user)
                .then(res=>{
                    if (res.data.code==0){
                        this.$message({
                            type:"success",
                            message:res.data.msg,
                            onClose:()=>{
                                this.$router.push("/login")
                            }
                        })
                    }else {
                        this.$message.warning(res.data.msg)
                    }
                    // console.log(res.data)
                }).catch(err=>{
                    this.$message.error('服务器异常，请稍后再试!!!');
                })

            }
        }
    }
</script>

<style scoped>

    #register{
        width: 300px;
        height: 220px;
        margin: 200px auto 0;
        text-align: center;
    }
</style>
